<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NBA不同位置的球员数量占比&NBA不同身高的球员数量占比</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/vintage.js"></script>
    <style>
        .cart_group{
            padding: 60px;
            display: flex;
            justify-content: space-between;
        }
        .cart1{
            width: 700px;
            height: 500px;
        }
        .cart2{
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="cart_group">
    <div class="cart1"></div>
    <div class="cart2"></div>
</div>
<script>
    var myCharts1 = echarts.init(document.querySelector('.cart1'),'vintage')
    var myCharts2 = echarts.init(document.querySelector('.cart2'),'vintage')
    var data1 = {{ data1|tojson }}
    var data2 = {{ data2|tojson }}

    function getOption(data,title_text,name_text){
        var option = {
            title:{
                text:title_text,
                textStyle:{
                    fontFamily:'楷体',
                    fontSize:21,
                },
                top:10,
                left:10
            },
            legend:{
              name:  ['球员数量'],
                bottom:15,
                left: 15,
                orient:'vertical'
            },
            tooltip:{
                trigger:'item',
                triggerOn:'mmousemove',
                formatter:function (res)
                {
                    if(res.seriesName=="位置:球员数量")
                    {
                        return '位置：'+res.name+'<br>'+'球员数量：'+res.value+'<br>'+'占比：'+res.percent+'%'
                    }else{
                        return '身高区间：'+res.name+'<br>'+'球员数量：'+res.value+'<br>'+'占比：'+res.percent+'%'
                    }
                }
            },
            series:[
                {
                    type:'pie',
                    name:name_text,
                    data:data,
                    label:{
                        show:true,
                    },
                    {#radius:['50%','70%'], //环形饼图#}
                    roseType:'radius', //南丁格尔玫瑰图
                    selectedMode:'multiple',
                    selectedOffset:20
                }
            ]
        }
        return option
    }
    {#NBA不同位置的球员数量占比#}
    var option1 = getOption(data1,'NBA不同位置的球员数量占比','位置:球员数量')
    {#NBA不同身高的球员数量占比#}
    var option2 = getOption(data2,'NBA不同身高的球员数量占比','身高:球员数量')

    myCharts1.setOption(option1)
    myCharts2.setOption(option2)
</script>
</body>
</html>